<template>
    <div class="app-container" v-loading="loading">

        <CommonContainer title="信审批复建议" v-if="detailInfo.creditReviewStatus>=7&&detailInfo.creditReviewStatus<=9">
            <div>
                <el-descriptions>
                    <el-descriptions-item label="信审批复建议">{{ results.creditReviewResult|creditSuggestionApproval }}</el-descriptions-item>
                    <el-descriptions-item label="审核人">{{ results.auditPerson|filterNull }}</el-descriptions-item>
                    <el-descriptions-item label="审核时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
                </el-descriptions>

                <div style="margin: 10px 0">
                    <div class="table-title-wrap flex-row-center-sb" style="padding: 0 10px">
                        <div class="flex-row-center">
                            <span class="quota">信审额度:</span>
                            <template v-if="results.displayType==1||results.displayType==2">
                                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                            </template>
                            <template v-else>
                                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                                <template v-if="results.displayType==3">
                                    <span style="font-size: 14px;color: #8C8C8C">操作人:</span>
                                    <span class="date">{{ cancellationInstructions.invalidOperator|filterNull }}</span>
                                </template>
                            </template>
                        </div>
                        <div class="flex-row-center">
                            <p class="statisticInfo">申请总台数: <span>{{ results.totalApplicationNumber }}</span></p>
                            <p class="statisticInfo">通过总台数: <span>{{ results.totalPassNumber }}</span></p>
                            <p class="statisticInfo">拒绝总台数: <span>{{ results.totalRejectNumber }}</span></p>
                        </div>
                    </div>


                    <el-table
                        :data="results.cars"
                        :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                        <el-table-column
                            align="center"
                            prop="vehicleManufacturers"
                            label="车辆厂商"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="vehicleModel"
                            label="车辆车型"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="vehicleStyle"
                            label="车辆款型"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="carNo"
                            label="车牌号"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="vehicleEnergyType"
                            label="车辆能源类型"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="registrationNature"
                            label="登记性质"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="applicationType"
                            label="申请类型"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="leaseTerm"
                            label="租赁期限(月)"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="rentPaymentMethod"
                            label="租金支付方式"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="mileageLimit"
                            label="里程限制（公里)"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="registeredCity"
                            label="上牌城市"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="registrationFee"
                            label="上牌费"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="insurancePremium"
                            label="保险费"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="maintenancePremium"
                            label="维保费"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="purchaseTax"
                            label="购置税"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="vehicleAndVesselTax"
                            label="车船税"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="installationCost"
                            label="加装费用"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="otherExpenses"
                            label="其他费用"
                            min-width="120">
                        </el-table-column>
                      <el-table-column
                          align="center"
                          prop="irr"
                          label="IRR（含牌照）"
                          min-width="120">
                        <template v-slot="{row}">
                          <template v-if="row.irr">{{row.irr}}%</template>
                          <template v-else>--</template>
                        </template>
                      </el-table-column>
                        <el-table-column
                            align="center"
                            prop="margin"
                            label="保证金"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="monthlyRent"
                            label="月租金"
                            min-width="120">
                        </el-table-column>
                      <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                        <template v-slot="{row}">
                          <template v-if="row.firstInstallmentRentalRatio">
                            {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                          </template>
                          <template v-else>
                            -- 、--
                          </template>

                        </template>
                      </el-table-column>
                      <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                          <template v-if="row.residualValueRatio">
                            {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                          </template>
                          <template v-else>
                            -- 、--
                          </template>

                        </template>
                      </el-table-column>
                        <el-table-column
                            align="center"
                            prop="suggestedPrice"
                            label="厂商指导价"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="purchasePrice"
                            label="新车采购单价"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="currentValuation"
                            label="旧车当前估值"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="numberOfApplications"
                            label="申请台数"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="numberOfUnitsPassed"
                            label="通过台数"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="rejectedUnits"
                            label="拒绝台数"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="numberOfUnitsUsed"
                            label="已使用台数"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="numberOfInvalidUnits"
                            label="作废台数"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="numberOfFrozenUnits"
                            label="冻结台数"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="numberOfFrozenUnits"
                            label="剩余可用台数"
                            min-width="120">
                          <template v-slot="{row}">
                            <span>{{ row.numberOfUnitsPassed - row.numberOfUnitsUsed -row.numberOfInvalidUnits -row.numberOfFrozenUnits}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="effectiveStatus"
                            label="通过台数状态"
                            min-width="120">
                            <template v-slot="{row}">
                                <span>{{ row.effectiveStatus == 1 ? '生效中' : '已过期' }}</span>
                            </template>
                        </el-table-column>


                    </el-table>
                </div>
                <el-descriptions :column="3">
                    <el-descriptions-item label="说明" :span="3">{{ results.remark|filterNull }}</el-descriptions-item>
                    <el-descriptions-item label="附件" :span="3">
                        <image-common disabled v-model="results.annex"></image-common>
                    </el-descriptions-item>
                </el-descriptions>

            </div>
        </CommonContainer>

        <CommonContainer title="撤单信息" v-if="detailInfo.creditReviewStatus==11">
            <el-descriptions>
                <el-descriptions-item label="撤单说明" :span="3">{{ cancellationInstructions.invalidRemark|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="撤单人">{{ cancellationInstructions.invalidOperator|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="撤单时间">{{ cancellationInstructions.invalidTime|filterNull }}</el-descriptions-item>
            </el-descriptions>
        </CommonContainer>

        <CommonContainer title="不予准入信息" v-if="detailInfo.creditReviewStatus==10">
            <el-descriptions :column="3">
                <el-descriptions-item label="不予准入说明" :span="3">{{ cancellationInstructions.invalidRemark|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="审核人">{{ cancellationInstructions.invalidOperator|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="审核时间">{{ cancellationInstructions.invalidTime|filterNull }}</el-descriptions-item>
            </el-descriptions>
        </CommonContainer>

        <CommonContainer v-if="detailInfo.basicData && detailInfo.basicData.length>0" title="基础资料">
            <el-descriptions :column="1">
                <el-descriptions-item v-for="fileItem in detailInfo.basicData" :key="fileItem.id" :label="`${fileItem.dataName}`">
                    <image-common v-model="fileItem.files" disabled :up-type="2" info="上传附件" :limit="100"></image-common>
                </el-descriptions-item>
                <el-descriptions-item v-if="detailInfo.needGuarantor==1" label="担保人信息">
                    <GuarantorsEcho  :guarantors="guarantors"></GuarantorsEcho>
                </el-descriptions-item>
            </el-descriptions>
        </CommonContainer>

        <CommonContainer v-if="detailInfo.chooseOneData && detailInfo.chooseOneData.length>0" title="择一提供资料">
            <el-descriptions :column="1">
                <el-descriptions-item v-for="fileItem in detailInfo.chooseOneData" :key="fileItem.id" :label="`${fileItem.dataName}`" :span="3">
                    <image-common v-model="fileItem.files" disabled :up-type="2" info="上传附件" :limit="100"></image-common>
                </el-descriptions-item>
            </el-descriptions>
        </CommonContainer>

        <CommonContainer v-if="detailInfo.selectiveData && detailInfo.selectiveData.length>0" title="可选择性资料">
            <el-descriptions>
                <el-descriptions-item v-for="fileItem in detailInfo.selectiveData" :key="fileItem.id" :label="`${fileItem.dataName}:`" :span="3">
                    <image-common v-model="fileItem.files" disabled :up-type="2" info="上传附件" :limit="100"></image-common>
                </el-descriptions-item>
                <el-descriptions-item v-if="detailInfo.needGuarantor==3" label="担保人信息:">
                    <GuarantorsEcho :guarantors="guarantors"></GuarantorsEcho>
                </el-descriptions-item>
            </el-descriptions>

        </CommonContainer>

        <CommonContainer title="资料补充记录" v-if="detailInfo.addData&&detailInfo.addData.length>0">
            <el-table
                :data="detailInfo.addData"
                border>
                <el-table-column
                    align="center"
                    prop="fileAddRemark"
                    label="补充资料"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="needGuarantor"
                    label="是否需要担保人"
                    min-width="120">
                    <template v-slot="{row}">
                        {{ row.needGuarantor|needGuarantor }}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="createBy"
                    label="创建人"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="createTime"
                    label="创建时间"
                    min-width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="auditPerson"
                    label="状态"
                    min-width="120">
                    <template v-slot="{row}">
                        {{ row.status == 1 ? '已提交' : '待提交' }}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="updateBy"
                    label="提交人"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="updateTime"
                    label="提交时间"
                    min-width="120">
                </el-table-column>

                <el-table-column
                    align="center"
                    prop="effectiveStatus"
                    label="操作"
                    fixed="right"
                    min-width="120">
                    <template v-slot="{row}">
                        <e-button v-if="row.status==2" size="mini" type="text" @click="handleOperationBtn(1,row)"
                        >补充资料
                        </e-button>
                        <e-button size="mini" type="text" @click="handleOperationBtn(2,row)"
                        >查看
                        </e-button>
                    </template>
                </el-table-column>
            </el-table>
        </CommonContainer>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="back">返回</el-button>
        </div>


        <ReplenishFiles ref="replenishFiles"></ReplenishFiles>
        <ReplenishFilesEcho ref="replenishFilesEcho"></ReplenishFilesEcho>
    </div>
</template>

<script>
import {getFileDetails} from '@/api/letterReview/creditReviewApply'
import ReplenishFiles from "@/views/letterReview/order/components/ReplenishFiles.vue";
import ReplenishFilesEcho from "@/views/letterReview/order/components/ReplenishFilesEcho.vue";
import GuarantorsEcho from "@/views/letterReview/order/components/GuarantorsEcho.vue";
import {filterNull} from "@/utils/filters";

export default {
    dicts: ['credit_review_status'],
    components: {
        GuarantorsEcho,
        ReplenishFilesEcho,
        ReplenishFiles
    },
    data() {
        // 这里存放数据
        return {
            loading: false,
            detailInfo: {},
            results: {},
            cancellationInstructions: {},
            guarantors: []
        }
    },
    mounted() {
        this.getDetail()
    },
    // 方法集合
    methods: {
        filterNull,
        getDetail() {
            this.loading = true
            getFileDetails(this.$route.query.applicationNo).then(res => {
                this.detailInfo = res.data;
                this.results = this.detailInfo.results;
                this.cancellationInstructions = this.detailInfo.cancellationInstructions
                if (this.detailInfo.personal && this.detailInfo.personal.length > 0) {
                    this.guarantors = [...this.detailInfo.personal]
                }
                if (this.detailInfo.enterprise && this.detailInfo.enterprise.length > 0) {
                    this.guarantors = [...this.guarantors, ...this.detailInfo.enterprise]
                }
            }).finally(() => {
                this.loading = false
            })
        },
        // 资料补充记录操作按钮事件
        handleOperationBtn(type, row) {
            switch (type) {
                case 1: //补充资料
                    this.$refs.replenishFiles.show(row.applicationNo)
                    break
                case 2: //查看
                    this.$refs.replenishFilesEcho.show(row.id)
                    break
            }
        },
        //返回
        back() {
            this.$router.back()
            this.$store.dispatch('tagsView/delView', this.$route)
        }
    },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
    color: #464646;
    font-size: 14px;
    margin-right: 10px;

    span {
        color: #1884FF;
    }
}

.quota {
    font-size: 14px;
    color: #8C8C8C;
    position: relative;
    left: 12px;
}

.date {
    font-size: 14px;
    margin: 0 20px;
}
</style>
